<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>FusionCharts v3 Documentation</title>
		<link rel="stylesheet" href="Style.css" type="text/css" />
	</head>
	<body>
		<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
			<tr>
				<td><h2 class="pageHeader">Using FusionCharts with ASP.NET (VB.NET) &gt; Charting Data from an 
						Array
					</h2>				</td>
			</tr>
			<tr>
				<td valign="top" class="text"><p>In this section, we'll show you how to use 
						FusionCharts and ASP.NET to plot charts from data contained in ASP.NET arrays. 
						We'll cover the following examples here:</p>
					<ul>
						<li>
							Creating a single series chart from data contained in arrays</li>
						<li>
							Creating a multi-serise chart from data contained in arrays						</li>
					</ul>
					<p><strong>Before you go further with this page, we recommend you to please see the 
							previous section &quot;Basic Examples&quot; as we start off from concepts 
							explained in that page. </strong>					</p>
					<p class="highlightBlock">The code examples contained in this page are present in
						<span class="codeInline">Download Package &gt; Code &gt; VB_NET &gt; ArrayExample</span>
						folder.					</p>				</td>
			</tr>
			<tr>
				<td valign="top" class="text">&nbsp;</td>
			</tr>
			<tr>
				<td valign="top" class="header">Creating a single series chart from data contained 
					in arrays</td>
			</tr>
			<tr>
				<td valign="top" class="text">The code to create a single series chart is contained 
					in
					<span class="codeInline">SingleSeries.aspx</span>
					and can be listed as under:				</td>
			</tr>
			<tr>
				<td valign="top" class="codeBlock"><p>&lt;%@ Page language=&quot;vb&quot; Codebehind=&quot;SingleSeries.aspx.vb&quot; AutoEventWireup=&quot;false&quot; Inherits=&quot;InfoSoftGlobal.SingleSeries&quot; %&gt;<br />
				  &lt;HTML&gt;<br />
&lt;HEAD&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;TITLE&gt;FusionCharts - Array Example using Single Series Column 3D Chart &lt;/TITLE&gt;<br />
&nbsp;&nbsp;&nbsp;<strong>&lt;SCRIPT LANGUAGE=&quot;Javascript&quot; SRC=&quot;../../FusionCharts/FusionCharts.js&quot;&gt;&lt;/SCRIPT&gt;</strong><br />
&lt;/HEAD&gt;<br />
&lt;body&gt;<br />
&lt;CENTER&gt;<br />
&nbsp;&nbsp;&lt;form id='form1' name='form1' method='post' runat=&quot;server&quot;&gt; <br />
<strong>&nbsp;&nbsp;&nbsp;&nbsp;&lt;%=GetProductSalesChartHtml()%&gt; </strong><br />
&nbsp;&nbsp;&lt;/form&gt;<br />
&lt;/body&gt;<br />
&lt;/HTML&gt;<br />
				</p>				</td>
			</tr>
			<tr>
				<td valign="top" class="text"><p>In the above code, we first include <span class="codeInline">FusionCharts.js</span> file to enable us embed the chart using JavaScript. We then call method <span class="codeInline">GetProductSalesChartHtml</span> from the code behind to generate code for chart.</p>
				  <p>And, the function
					<span class="codeInline">GetProductSalesChartHtml()</span>
					in code behind file
					<span class="codeInline">SingleSeries.aspx.vb</span> can be listed as under: </p></td>
			</tr>
			<tr>
				<td valign="top" class="codeBlock"><p>
						Public Function GetProductSalesChartHtml() As String<br>
						<span class="codeComment">&nbsp;&nbsp;&nbsp;'In this example, we plot a single series chart from data contained<br>
&nbsp;&nbsp;&nbsp;'in an array. The array will have two columns - first one for data label<br>
&nbsp;&nbsp;&nbsp;'and the next one for data values.<br>
&nbsp;&nbsp;&nbsp;'Let's store the sales data for 6 products in our array). We also store<br>
&nbsp;&nbsp;&nbsp;'the name of products. <br>
						</span>&nbsp;&nbsp;&nbsp;Dim arrData(6, 3)<br>
						&nbsp;<span class="codeComment">&nbsp;&nbsp;'Store Name of Products</span><br>
						&nbsp;&nbsp;&nbsp;arrData(0, 0) = "Product A"<br>
						&nbsp;&nbsp;&nbsp;arrData(1, 0) = "Product B"<br>
						&nbsp;&nbsp;&nbsp;arrData(2, 0) = "Product C"<br>
						&nbsp;&nbsp;&nbsp;arrData(3, 0) = "Product D"<br>
						&nbsp;&nbsp;&nbsp;arrData(4, 0) = "Product E"<br>
						&nbsp;&nbsp;&nbsp;arrData(5, 0) = "Product F"<br>
						<span class="codeComment">&nbsp;&nbsp;&nbsp;'Store sales data</span><br>
						&nbsp;&nbsp;&nbsp;arrData(0, 1) = 567500<br>
						&nbsp;&nbsp;&nbsp;arrData(1, 1) = 815300<br>
						&nbsp;&nbsp;&nbsp;arrData(2, 1) = 556800<br>
						&nbsp;&nbsp;&nbsp;arrData(3, 1) = 734500<br>
						&nbsp;&nbsp;&nbsp;arrData(4, 1) = 676800<br>
						&nbsp;&nbsp;&nbsp;arrData(5, 1) = 648500<br>
						&nbsp;&nbsp;<span class="codeComment">&nbsp;'Now, we need to convert this data into XML. We convert using string 
						concatenation.</span><br>
						&nbsp;&nbsp;&nbsp;Dim xmlData As String<br>
						&nbsp;<span class="codeComment">&nbsp;&nbsp;'Initialize &lt;chart&gt; element</span><br>
						&nbsp;&nbsp;&nbsp;xmlData = "&lt;chart caption='Sales by Product' numberPrefix='$' 
						formatNumberScale='0'&gt;"<br>
						&nbsp;&nbsp;<span class="codeComment">&nbsp;'Convert data to XML and append</span><br>
						&nbsp;&nbsp;&nbsp;Dim i As Integer = 0<br>
						&nbsp;&nbsp;&nbsp;Do While (i &lt; arrData.GetUpperBound(0))<br>
						&nbsp;&nbsp;&nbsp;&nbsp;xmlData = (xmlData &amp; ("&lt;set label='" _<br>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp; (arrData(i, 0) &amp; ("' value='" _<br>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp; (arrData(i, 1) &amp; "' /&gt;")))))<br>
						&nbsp;&nbsp;&nbsp;&nbsp;i = (i + 1)<br>
						&nbsp;&nbsp;&nbsp;Loop<br>
						&nbsp;&nbsp;<span class="codeComment">&nbsp;'Close &lt;chart&gt; element</span><br>
						&nbsp;&nbsp;&nbsp;xmlData = (xmlData &amp; "&lt;/chart&gt;")<br>
						<span class="codeComment">&nbsp;&nbsp;&nbsp;'Create the chart - Column 3D Chart with data contained in xmlData</span><br>
						&nbsp;&nbsp;&nbsp;<strong>Return 
						InfoSoftGlobal.FusionCharts.RenderChart("../../FusionCharts/Column3D.swf", "", 
						xmlData, "productSales", "600", "300", False, False)</strong><br>
						End Function<br>
					</p>				</td>
			</tr>
			<tr>
				<td valign="top" class="text"><p>In this method, we define an array
						<span class="codeInline">arrData</span>
					to store sales data for 6 different products. The array has two columns - first 
					one for data label and the next one for data values.
				</p>
					<p>We define a variable
						<span class="codeInline">xmlData</span>
						to store the entire XML data. To build the XML, we iterate through the array 
						and using string concatenation. Finally, we render the chart using
						<span class="codeInline">InfoSoftGlobal.FusionCharts.RenderChart()</span>
						function and pass
						<span class="codeInline">xmlData</span>
						as
						<span class="codeInline">dataXML</span>.					</p>
					<p>When you view the chart, you'll see a chart as under:					</p>				</td>
			</tr>
			<tr>
				<td valign="top" class="text"><img src="Images/Code_ArraySS.jpg" width="584" height="287" /></td>
			</tr>
			<tr>
				<td valign="top" class="text">&nbsp;</td>
			</tr>
			<tr>
				<td valign="top" class="header">Creating a multi-series chart from data contained 
					in arrays				</td>
			</tr>
			<tr>
				<td valign="top" class="text">Let us now create a multi-series chart from data 
					contained in arrays. We create a file
					<span class="codeInline">MultiSeries.aspx</span>
					with the following code:				</td>
			</tr>
			<tr>
				<td valign="top" class="codeBlock"><p>
						&nbsp;&lt;%@ Page language="c#" Codebehind="MultiSeries.aspx.vb" 
						AutoEventWireup="false" 
						Inherits="InfoSoftGlobal.GeneralPages.ASP.NET.ArrayExample.MultiSeries" %&gt;<br>
						&nbsp;&nbsp;&lt;HTML&gt;<br>
						&nbsp;&nbsp;&nbsp;&lt;HEAD&gt;<br>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;TITLE&gt;FusionCharts - Array Example using 
						Multi Series Column 3D Chart &lt;/TITLE&gt;<br>
						<strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;SCRIPT LANGUAGE="Javascript" 
						SRC="../../FusionCharts/FusionCharts.js"&gt;&lt;/SCRIPT&gt;</strong><br>
						&nbsp;&nbsp;&nbsp;&lt;/HEAD&gt;<br>
						&nbsp;&nbsp;&nbsp;&lt;body&gt;<br>
						<strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong>&lt;form id='form1' name='form1' method='post' runat=&quot;server&quot;&gt;<br />
                        <strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;%=GetProductSalesChartHtml()%&gt; </strong><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/form&gt;<br>
						&nbsp;&nbsp;&nbsp;&lt;/body&gt;<br>
						&nbsp;&nbsp;&lt;/HTML&gt;<br>
					</p>
					<p><br>
				  </p>				</td>
			</tr>
			<tr>
			  <td valign="top" class="text"><p>Again, we first include <span class="codeInline">FusionCharts.js</span> file to enable us embed the chart using JavaScript. After that, we call <span class="codeInline">GetProductSalesChartHtml</span>() method from the code behind to return HTML code for the chart. </p>
		      <p>The GetProductSalesChartHtml() method in code behind page can be listed as under: </p></td>
		  </tr>
			<tr>
			  <td valign="top" class="codeBlock">Public Function GetProductSalesChartHtml() As String<br />
                <span class="codeComment">&nbsp;&nbsp;&nbsp;'In this example, we plot a multi series chart from data contained<br />
&nbsp;&nbsp;&nbsp;'in an array. The array will have three columns - first one for data 
						label (product)<br />
&nbsp;&nbsp;&nbsp;'and the next two for data values. The first data value column would 
						store sales information<br />
&nbsp;&nbsp;&nbsp;'for current year and the second one for previous year.<br />
&nbsp;&nbsp;&nbsp;'Lets store the sales data for 6 products in our array. We also store<br />
&nbsp;&nbsp;&nbsp;'the name of products. <br />
                </span>&nbsp;&nbsp;&nbsp;Dim arrData(6, 3)<br />
&nbsp;&nbsp;<span class="codeComment">&nbsp;'Store Name of Products</span><br />
&nbsp;&nbsp;&nbsp;arrData(0, 0) = &quot;Product A&quot;<br />
&nbsp;&nbsp;&nbsp;arrData(1, 0) = &quot;Product B&quot;<br />
&nbsp;&nbsp;&nbsp;arrData(2, 0) = &quot;Product C&quot;<br />
&nbsp;&nbsp;&nbsp;arrData(3, 0) = &quot;Product D&quot;<br />
&nbsp;&nbsp;&nbsp;arrData(4, 0) = &quot;Product E&quot;<br />
&nbsp;&nbsp;&nbsp;arrData(5, 0) = &quot;Product F&quot;<br />
&nbsp;<span class="codeComment">&nbsp;&nbsp;'Store sales data for current year</span><br />
&nbsp;&nbsp;&nbsp;arrData(0, 1) = 567500<br />
&nbsp;&nbsp;&nbsp;arrData(1, 1) = 815300<br />
&nbsp;&nbsp;&nbsp;arrData(2, 1) = 556800<br />
&nbsp;&nbsp;&nbsp;arrData(3, 1) = 734500<br />
&nbsp;&nbsp;&nbsp;arrData(4, 1) = 676800<br />
&nbsp;&nbsp;&nbsp;arrData(5, 1) = 648500<br />
&nbsp;&nbsp;<span class="codeComment">&nbsp;'Store sales data for previous year</span><br />
&nbsp;&nbsp;&nbsp;arrData(0, 2) = 547300<br />
&nbsp;&nbsp;&nbsp;arrData(1, 2) = 584500<br />
&nbsp;&nbsp;&nbsp;arrData(2, 2) = 754000<br />
&nbsp;&nbsp;&nbsp;arrData(3, 2) = 456300<br />
&nbsp;&nbsp;&nbsp;arrData(4, 2) = 754500<br />
&nbsp;&nbsp;&nbsp;arrData(5, 2) = 437600<br />
&nbsp;&nbsp;&nbsp;<span class="codeComment">'Now, we need to convert this data into multi-series XML. <br />
&nbsp;&nbsp;&nbsp;'We convert using string concatenation.<br />
&nbsp;&nbsp;&nbsp;'xmlData - Stores the entire XML<br />
&nbsp;&nbsp;&nbsp;'strCategories - Stores XML for the &lt;categories&gt; and child 
			  &lt;category&gt; elements<br />
&nbsp;&nbsp;&nbsp;'strDataCurr - Stores XML for current year's sales<br />
&nbsp;&nbsp;&nbsp;'strDataPrev - Stores XML for previous year's sales</span><br />
&nbsp;&nbsp;&nbsp;Dim xmlData As String<br />
&nbsp;&nbsp;&nbsp;Dim categories As String<br />
&nbsp;&nbsp;&nbsp;Dim currentYear As String<br />
&nbsp;&nbsp;&nbsp;Dim previousYear As String<br />
&nbsp;&nbsp;&nbsp;<span class="codeComment">'Initialize &lt;chart&gt; element</span><br />
&nbsp;&nbsp;&nbsp;xmlData = &quot;&lt;chart caption='Sales by Product' numberPrefix='$' 
						formatNumberScale='1' rotateValues='1' placeValues&quot; &amp; _<br />
&nbsp;&quot;Inside='1' decimals='0' &gt;&quot;<br />
&nbsp;&nbsp;<span class="codeComment">&nbsp;'Initialize &lt;categories&gt; element - necessary to generate a 
						multi-series chart</span><br />
&nbsp;&nbsp;&nbsp;categories = &quot;&lt;categories&gt;&quot;<br />
&nbsp;&nbsp;<span class="codeComment">&nbsp;'Initiate &lt;dataset&gt; elements</span><br />
&nbsp;&nbsp;&nbsp;currentYear = &quot;&lt;dataset seriesName='Current Year'&gt;&quot;<br />
&nbsp;&nbsp;&nbsp;previousYear = &quot;&lt;dataset seriesName='Previous Year'&gt;&quot;<br />
&nbsp;&nbsp;<span class="codeComment">&nbsp;'Iterate through the data </span><br />
&nbsp;&nbsp;&nbsp;Dim i As Integer = 0<br />
&nbsp;&nbsp;&nbsp;Do While (i &lt; arrData.GetUpperBound(0))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="codeComment">&nbsp;'Append &lt;category name='...' /&gt; to strCategories</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;categories = (categories &amp; (&quot;&lt;category name='&quot; _<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp; (arrData(i, 0) &amp; &quot;' /&gt;&quot;)))<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="codeComment">&nbsp;&nbsp;'Add &lt;set value='...' /&gt; to both the datasets</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currentYear = (currentYear &amp; (&quot;&lt;set value='&quot; _<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &amp; (arrData(i, 1) &amp; &quot;' /&gt;&quot;)))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;previousYear = (previousYear &amp; (&quot;&lt;set value='&quot; _<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &amp; (arrData(i, 2) &amp; &quot;' /&gt;&quot;)))<br />
&nbsp;&nbsp;&nbsp;&nbsp;i = (i + 1)<br />
&nbsp; Loop<br />
&nbsp;&nbsp;<span class="codeComment">&nbsp;'Close &lt;categories&gt; element</span><br />
&nbsp;&nbsp;&nbsp;categories = (categories &amp; &quot;&lt;/categories&gt;&quot;)<br />
&nbsp;<span class="codeComment">&nbsp;&nbsp;'Close &lt;dataset&gt; elements</span><br />
&nbsp;&nbsp;&nbsp; currentYear = (currentYear &amp; &quot;&lt;/dataset&gt;&quot;)<br />
&nbsp;&nbsp;&nbsp;previousYear = (previousYear &amp; &quot;&lt;/dataset&gt;&quot;)<br />
&nbsp;&nbsp;<span class="codeComment">&nbsp;'Assemble the entire XML now</span><br />
&nbsp;&nbsp;&nbsp;xmlData = (xmlData _<br />
&nbsp;&nbsp;&nbsp;&nbsp;&amp; (categories _<br />
&nbsp;&nbsp;&nbsp;&nbsp; &amp; (currentYear _<br />
&nbsp;&nbsp;&nbsp;&nbsp; &amp; (previousYear &amp; &quot;&lt;/chart&gt;&quot;))))<br />
&nbsp;&nbsp;<span class="codeComment">&nbsp;'Create the chart - MS Column 3D Chart with data contained in strXML</span><br />
&nbsp;&nbsp;<strong>&nbsp;Return 
						InfoSoftGlobal.FusionCharts.RenderChart(&quot;../../FusionCharts/MSColumn3D.swf&quot;, 
			  &quot;&quot;, xmlData, &quot;productSales&quot;, &quot;600&quot;, &quot;300&quot;, False, False)</strong><br />
End Function</td>
		  </tr>
			<tr>
				<td valign="top" class="text"><p>In this method, we define an array
						<span class="codeInline">arrData</span>
					  to store sales data for 6 different products. The array has three columns - 
						first one for data label (product) and the next two for data values. The first 
						data value column would store sales information<br />
					  for current year and the second one for previous year.
				
				  <p>We define a variable
						<span class="codeInline">xmlData</span>
						to store the entire XML data. We also define
						<span class="codeInline">categories, currentYear, previousYear</span>
						variables to store XML data for categories elements, current year's dataset and 
						previous year's dataset respectively. To build the XML, we iterate through the 
						array and using string concatenation. We concatenate the entire XML finally in <span class="codeInline">xmlData</span>.					</p>
					<p>Finally, we render the chart using
						<span class="codeInline">FusionCharts.RenderChart()</span>
						function and pass
						<span class="codeInline">xmlData</span>
						as
						<span class="codeInline">dataXML</span>.					</p>
					<p>When you view the chart, you'll see a chart as under:					</p>				</td>
			</tr>
			<tr>
				<td valign="top" class="text"><img src="Images/Code_ArrayMS.jpg" alt="" width="584" height="287" /></td>
			</tr>
			<tr>
				<td valign="top" class="highlightBlock">In
					<span class="codeInline">Download Package &gt; Code &gt; VB_NET &gt; ArrayExample</span>, 
					we've more example codes to create Stacked and Combination Charts too, which 
					have not been explained here, as they're similar in concept. You can directly 
					see the code if you want to.				</td>
			</tr>
		</table>
	</body>
</html>
